<!-- <page-header autoTitle="false"> </page-header> -->

<div nz-row nzGutter="24">
  <div nz-col [nzSpan]="6" class="customer-col">
    <div class="customer-tree-head">
      <div class="customer-tree-head-wapper">
        <div class="customer-tree-head-title">
          <nz-select style="width: 85%" [(ngModel)]="currentWsId" (ngModelChange)="queryNodeTree()">
            <nz-option *ngFor="let item of workspaces" [nzValue]="item.id" [nzLabel]="item.label" />
          </nz-select>
        </div>
        <div class="customer-tree-extra">
          <nz-button-group>
            <button nz-button nzType="primary" (click)="queryNodeTree()" [nzLoading]="isLoading">
              <i nz-icon nzType="sync"></i>
            </button>
          </nz-button-group>
        </div>
      </div>
    </div>
    <nz-input-group [nzSuffix]="suffixIcon" style="margin-top: 5px; width: 100%" nzSize="small">
      <input type="text" nz-input placeholder="Search" [(ngModel)]="searchTreeValue" />
    </nz-input-group>
    <ng-template #suffixIcon>
      <i nz-icon nzType="search"></i>
    </ng-template>
    <div [ngStyle]="currentClasses">
      <nz-tree
        #nzTreeComponent
        style="margin-top: 8px"
        [nzData]="nodeTree"
        [nzSearchValue]="searchTreeValue"
        (nzClick)="treeNodeClick($event)"
        (nzDblClick)="treeNodeDbClick($event)"
        nzDraggable
        nzBlockNode
        nzShowIcon
        [nzTreeTemplate]="nzTreeTemplate"
      />
      <ng-template #nzTreeTemplate let-node let-origin="origin">
        <span class="custom-node">
          <span *ngIf="node.origin.type == 'folder'" (contextmenu)="treeContextMenu($event, treeMenu)">
            <span nz-icon nzTheme="fill" [nzType]="node.isExpanded ? 'folder-open' : 'folder'"></span>
            <span class="file-name"> {{ node.title }}</span>
          </span>
          <span *ngIf="node.origin.type === 'table'" (contextmenu)="treeContextMenu($event, treeMenu)">
            <span nz-icon nzType="table"></span>
            <span class="file-name"> {{ node.title }}</span>
          </span>
        </span>
      </ng-template>
      <nz-dropdown-menu #treeMenu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item (click)="queryTableInfo()">加载表</li>
        </ul>
      </nz-dropdown-menu>
    </div>
  </div>

  <div nz-col [nzSpan]="18" class="customer-col">
    <div class="customer-tree-head">
      <div class="customer-tree-head-wapper">
        <div class="customer-tree-head-title">表设计</div>
        <div class="customer-tree-extra">
          <a nz-button nzType="default" nzType="default" nzShape="round" (click)="openDbScript()">查看表脚本</a>
          <a nz-button nzType="default" nzType="default" nzShape="round" (click)="openJpaScript()">查看JPA代码</a>
          <button nz-button nzType="text" (click)="exportColumnList()" nzType="default" nzShape="round">
            <span nz-icon nzType="download" nzTheme="outline"></span>excel导出</button
          >
        </div>
      </div>
    </div>
    <div [ngStyle]="currentClasses">
      <form nz-form [formGroup]="tableInfoForm" style="padding-right: 15px; margin-top: 8px">
        <nz-form-item style="margin-bottom: 12px">
          <nz-form-label [nzSm]="2" nzFor="tableName" nzRequired>表名</nz-form-label>
          <nz-form-control nzErrorTip="Please input your tableName">
            <input formControlName="tableName" nz-input placeholder="" readonly />
          </nz-form-control>
          <nz-form-label [nzSm]="2" nzFor="tableComment" nzRequired>中文名</nz-form-label>
          <nz-form-control nzErrorTip="Please input your tableComment!">
            <input formControlName="tableComment" nz-input placeholder="" readonly />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item style="margin-bottom: 12px">
          <nz-form-label [nzSm]="2" nzFor="tableComment">备注</nz-form-label>
          <nz-form-control nzSpan="24" nzErrorTip="Please input your tableComment!">
            <input formControlName="remark" nz-input placeholder="" readonly />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item style="margin-bottom: 12px">
          <nz-form-label [nzSm]="2" nzFor="sourceType">来源类型</nz-form-label>
          <nz-form-control nzErrorTip="Please input your sourceType">
            <input formControlName="sourceType" nz-input placeholder="" readonly />
          </nz-form-control>
          <nz-form-label [nzSm]="2" nzFor="sourceName">来源名称</nz-form-label>
          <nz-form-control nzErrorTip="Please input your sourceName!">
            <input formControlName="sourceName" nz-input placeholder="" readonly />
          </nz-form-control>
        </nz-form-item>

        <nz-divider nzText="字段设计" nzOrientation="left" />
        <nz-table formArrayName="columns" nzSize="small" [nzData]="columns.value" [nzShowPagination]="false">
          <thead>
            <tr>
              <th nzWidth="22%" nzShowSort="true" nzShowFilter="true">字段英文名</th>
              <th nzWidth="23%">字段中文名</th>
              <th nzWidth="15%">数据类型</th>
              <th nzWidth="5%">长度</th>
              <th nzWidth="5%">刻度</th>
              <th nzWidth="5%" nzAlign="center">可空</th>
              <th nzWidth="15%">默认值</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of columns.controls; let i = index" [formGroupName]="i">
              <ng-container>
                <td>{{ columns.value[i].columnName }}</td>
                <td>{{ columns.value[i].columnComment }}</td>
                <td>{{ columns.value[i].dataType }}</td>
                <td>{{ columns.value[i].length }}</td>
                <td>{{ columns.value[i].scale }}</td>
                <td>{{ columns.value[i].nullable }}</td>
                <td>{{ columns.value[i].dataDefault }}</td>
              </ng-container>
            </tr>
          </tbody>
        </nz-table>
        <div style="margin-left: 5px"> 合计字段数：{{ columns.controls.length }} </div>

        <nz-divider nzText="约束设计" nzOrientation="left" />
        <nz-table
          formArrayName="constraints"
          nzSize="small"
          [nzData]="constraints.value"
          [nzShowPagination]="false"
          nzBordered
          nzNoResult="暂无数据"
        >
          <thead>
            <tr>
              <th nzWidth="20%" nzShowSort="true" nzShowFilter="true">约束类型</th>
              <th nzWidth="25%">约束名称</th>
              <th nzWidth="30%">字段列表</th>
              <th nzWidth="10%">自增长</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of constraints.controls; let i = index" [formGroupName]="i">
              <ng-container>
                <td>{{ constraints.value[i].constraintType }}</td>
                <td>{{ constraints.value[i].constraintName }}</td>
                <td>{{ constraints.value[i].columnList }}</td>
                <td>{{ constraints.value[i].pkAutoIncrement }}</td>
              </ng-container>
            </tr>
          </tbody>
        </nz-table>
      </form>
    </div>
  </div>
</div>
